/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      文件      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.CoreBody .CoreWeb-FormFile {
  overflow: hidden;

  /* ============================== 容器 ============================== */
  > div {
    position: relative;

    &:hover > .CoreWeb-FormFile-del {
      opacity: 1;
    }
  }

  /* ============================== 上传区域 ============================== */
  + .CoreWeb-FormFile-upload {
    margin-top: 10px;
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<     文件名     >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.CoreBody .CoreWeb-FormFile-name {
  display: inline-flex;
  vertical-align: top;
  max-width: calc(100% - 40px);

  /* ============================== 前缀图片 ============================== */
  > img {
    display: inline-block;
    height: 20px;
    margin: 10px 8px 10px 0;
  }

  /* ============================== 前缀图标 ============================== */
  > i {
    display: inline-block;
    line-height: inherit;
    margin-right: 8px;
    vertical-align: top;
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      删除      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.CoreBody .CoreWeb-FormAudio-del,
.CoreBody .CoreWeb-FormFile-del {
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 10px 0 10px 20px;
  vertical-align: top;
  transition: 0.3s;
  cursor: pointer;

  /* ============================== 全部显示 ============================== */
  &-show {
    opacity: 1;
  }

  /* ============================== 全部隐藏 ============================== */
  &-hide {
    display: none !important;
  }

  /* ============================== 悬浮状态 ============================== */
  &:hover > i,
  &:hover > img {
    transform: scale(1.2);
  }

  /* ============================== 图标 ============================== */
  > i {
    font-size: 20px;
    vertical-align: top;
    color: #e11;
    transition: 0.3s;
  }

  /* ============================== 图片 ============================== */
  > img {
    width: 20px;
    height: 20px;
    vertical-align: top;
    transition: 0.3s;
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      上传      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.CoreBody .CoreWeb-FormImage-upload,
.CoreBody .CoreWeb-FormVideo-upload,
.CoreBody .CoreWeb-FormAudio-upload,
.CoreBody .CoreWeb-FormFile-upload {
  /* ============================== 隐藏上传 ============================== */
  &-hide {
    display: none !important;
  }

  /* ============================== 上传容器 ============================== */
  > div {
    width: 100%;
    height: 100%;
  }

  /* ============================== 原生组件 ============================== */
  .el-upload {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }

  /* ============================== 拖拽区域 ============================== */
  .el-upload-dragger {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    transition: 0.3s;

    /* —————————————————————————————— 缩放区域 —————————————————————————————— */

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      transition: 0.3s;

      /* ------------------------------ 悬浮状态 ------------------------------ */
      &:hover {
        transform: scale(1.1);

        i,
        div {
          color: #409eff;
        }
      }

      /* ------------------------------ 图标 ------------------------------ */
      > i {
        line-height: 1;
        margin: 0;
        font-size: 60px;
        color: var(--Black15);
        transition: 0.3s;
      }

      /* ------------------------------ 图片 ------------------------------ */
      > img {
        width: 60px;
        height: 60px;
      }

      /* ------------------------------ 文字 ------------------------------ */
      > div {
        line-height: 1;
        margin-bottom: 8px;
        color: var(--Black15);
        transition: 0.3s;
      }
    }
  }
}
